<template>
    <div>
       <div class="box">
        <div class="logon">
         <div class="logon-form">
          <router-link to="/login">返回登录</router-link>  
          <h3 class="checked-box">
            <span class="checked">注册</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入手机号" v-model="username" id="telephone" @blur="checkPhone()">
          </div>
          <div class="errorDiv">{{s_telephone1}}</div>
          <div class="input">
            <input type="password" placeholder="请输入密码" v-model="password" id="password" @blur="checkPasswords()">
          </div>
          <div class="errorDiv">{{s_password1}}</div>
          <div class="btn-box">
            <el-button class = "btn" type="primary" round @click="checkPhone();checkPasswords();logon()">注册</el-button>
          </div>
         </div>
        </div>
       </div>
    </div>
</template>

<script>
import {Input,Button} from "element-ui";
export default {
    data(){
      return {
        username:'',
        password:'',
        s_telephone1:'',
        s_password1:'',
        t_logon: true,
        p_logon: true,
      }
    },
    methods:{
        //手机号验证
        checkPhone(){
            const phone = document.getElementById('telephone').value;
            if(!(/^1[34578]\d{9}$/.test(phone))){
              if(phone===''){ //若手机号为空
               this.s_telephone1 = "请输入手机号码";
               this.t_logon  = false
               return false;
              }else{
               this.s_telephone1 = "手机号码格式错误";
               this.t_logon  = false
               return false;
              }
            }else{
               this.s_telephone1 = "";
               this.t_logon  = true
               return true;
            }
        },
        //密码验证
        checkPasswords(){
            const password = document.getElementById('password').value;   
          if(!(/^[a-zA-Z][a-zA-Z0-9]{7,15}$/.test(password))){ //密码正则校验
            if(password===''){ //若密码为空
              this.s_password1 = "请输入登录密码";
              this.p_logon  = false
              return false;
            }else { //密码非空的报错信息
              this.s_password1 = "密码8-16位,包含字母和数字,字母开头,不可以有特殊符号";
              this.p_logon  = false
              return false;
            }
          }else{ //密码正确则无错误信息
            this.s_password1 = "";
            this.p_logon  = true
            return true;
          }
        },
       async logon(){
        if(this.p_logon && this.t_logon){
        const res = await this.axios.post('/student/register',{
            "phone":this.username,
            "password":this.password
        })
        if(res.data.code === 1){
           this.$message({
            type: 'success',
            message: "注册成功"
           })
           this.$router.push('/login')
        }
        if(res.data.code === 0){
           this.$message({
            type: 'info',
            message: "该用户已存在"
           })
        }
        }
       },
    },
    components:{
        [Input.name]:Input,
        [Button.name]:Button
    }
}
</script>

<style lang="scss">
.box{
    width:100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F2F4F7;
    .logon{
        width: 50%;
        height: 500px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 30px;
        font-size:15px;
        display: flex;
        justify-content: center;
        align-items: center;
        .input{
           position: relative;  
           width:360px;
           height:20px;
           margin-bottom:50px;
           input{
             width: 100%;
             height: 100%;
             border:1px solid #d4d6d9;
             border-radius:24px ;
             padding: 25px;
             box-sizing: border-box;
            }
         
        }
        .errorDiv{
            font-size: 12px;
            color: #FF6600;
        }
        .btn-box{
            width: 360px;
            height: 46px;
            margin-top:20px;
            margin-bottom: 20px;
            .btn{
                width: 100%;
                height: 100%;
            }
        }
        .checked-box{
            height: 40px;
            font-size: 24px;
            margin-top: 25px;
        }
    }
}  
</style>